<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="test">
      <p>你好啊，12<span>3</span>4567890拜拜！</p>
      <p>hello everyone!</p>
    </div>
    <!--<div id="test1" style="width: 200px;height: 200px;overflow: auto">
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p id="p1">vvv</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
  <p>1231231231312</p>
</div>-->
    <script src="./htmlReplacer.preview.js"></script>
    <script type="text/javascript">
      var markers = [
        { id: 1, start: { tagName: 'p', tagIndex: 0, offset: 1 }, end: { tagName: 'p', tagIndex: 0, offset: 4 } },
        { id: 2, start: { tagName: 'p', tagIndex: 1, offset: 2 }, end: { tagName: 'p', tagIndex: 1, offset: 5 } }
      ]
      var options = {
        mouseenter(id) {
          console.log(`enter`, id)
        },
        mouseleave(id) {
          console.log(`leave`, id)
        }
      }
      htmlReplacer.mark(document.querySelector('#test'), markers, options)
    </script>
  </body>
</html>
